<template>
	<view class="container">
		<uni-card class="bind-card">
			<uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx; padding-bottom: 20rpx;">
				<uni-col :span="4">
					<view>
						<image style="height: 110.32rpx;" src="https://d1icd6shlvmxi6.cloudfront.net/gsc/IQW1FZ/5c/98/45/5c9845c97f9f492c8133479374a8eeb5/images/102-店铺列表-新顾客/u8.svg?token=1cff2fd923874baf353bef3371888b1d272bbfd98a101aced3d25b43620b2f43"></image>
					</view>
				</uni-col>
				<uni-col :span="20">
					<uni-col :span="12">
						<text style="margin: 0.3rem 0 0 0.3rem">王勇</text>
						<uni-rate :value="3" :size="16" color="#bbb" active-color="#fd911e" max="3" style="display:inline-block;" />
					</uni-col>
					<uni-col :span="12" style="text-align: right;">
						<text style="font-size:.8rem; color: #5a5959;">服务次数4223</text>
					</uni-col>
					<uni-col>
						<uni-tag text="皇冠店铺" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
						<uni-tag text="皇冠" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
						<uni-tag text="皇冠" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.5rem; margin-bottom: 0.3rem;"></uni-tag>
						<uni-tag text="服务" size="small" inverted="true" circle="true" icon="iconshouyehome" type="error" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
					</uni-col>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row location">
				<view @click="getLocation">
					<uni-row>
						<text style="font-size:.8rem; line-height: 1.5; color: #5a5959;">和平区令闻街200号新生活化妆品公司</text>
					</uni-row>
					<uni-row>
						<text style="font-size:.8rem; line-height: 1.5; color: #5a5959;">1.4公里</text>
					</uni-row>
				</view>
			</uni-row>
		</uni-card>
		<view class="shopcartMescroll">
			<view style="min-height: 600rpx;" :fixed="true">
				<mescroll-body ref="mescrollRef" :fixed="true">
				<view class="tui-cart-cell tui-mtop actView">
					<view class="tui-cart-cell fixedHeight tui-mtop" v-for="(item, index) in activeList" :key="index">
						<tui-swipe-action @click="handlerButton" :forbid="true" :params="item" class="swipe-action">
							<template v-slot:content>
								<view class="tui-goods-item-wrap">
									<checkbox-group @change="selectSingle(index)" class="tui-checkbox">
										<checkbox :value="item.id" :checked="item.checked" color="#fff" style="padding:20rpx 0;"/>
									</checkbox-group>
									<view class="tui-goods-item">
										<image src="../../../static/img/freeShipping.png" class="tui-goods-img imgMark" v-if="item.isSample !== 1 && item.isParcel === 1"></image>
										<!-- <image src="../../../static/img/gift.png" class="tui-goods-img imgMark" v-if="item.isSample === 1"></image> -->
										<image :src="imgSrc + item.productThumbnailImageUrl" class="tui-goods-img" />
										<view class="tui-goods-info">
											<view class="tui-goods-title">{{ item.productName }}</view>
											<view class="tui-goods-model" v-if="item.productSpecificationName != null">
												<view class="tui-model-text">{{ item.productSpecificationName }}</view>
											</view>
											<view class="tui-price-box">
												<view class="tui-goods-price">￥{{ item.productDiscountPrice }}</view>
												<view class="tui-scale">
													<tui-numberbox
														:value="item.orderCount"
														:height="38"
														:width="70"
														:min="1"
														:max="item.virtualInventory"
														:index="index"
														@change="changeNum($event, index)"
													></tui-numberbox>
												</view>
											</view>
										</view>
									</view>
								</view>
							</template>
						</tui-swipe-action>
					</view>
				</view>
				<!-- <view class="tui-safe-area" style="width: 100%;height: 400rpx;"></view> -->
				</mescroll-body>
			</view>
			<view class="tui-tabbar tabbar-category">
				<view class="tui-checkAll">
					<view class="tui-total-price">
						合计:
						<text class="tui-bold price-color">￥{{ totalPrice }}</text>
					</view>
				</view>
				<view class="category-btn shopcartBtn">
					<!-- <view v-if="!isEdit" @click="btnPay">去结算(0)</view>
						<view v-else>删除</view> -->
					<tui-button width="150rpx" height="70rpx" :size="30" type="black" shape="circle" :plain="true" @tap="deleteCart">取消</tui-button>
				</view>
				<view class="category-btn shopcartBtn">
					<!-- <view v-if="!isEdit" @click="btnPay">去结算(0)</view>
						<view v-else>删除</view> -->
					<tui-button width="200rpx" height="70rpx" :size="30" type="primary" shape="circle" @tap="btnPay">确认下单</tui-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseComponent from '@/components/baseComponent/baseComponent';
	import footBar from '@/components/footbar/footbar';
	import tuiSwipeAction from '@/components/swipe-action/swipe-action';
	import tuiButton from '@/components/button/button';
	import tuiNumberbox from '@/components/numberbox/numberbox';
	import tuiDivider from '@/components/divider/divider';
	import mixEmpty from '@/components/mix-empty/mix-empty.vue';
	import mixin from '@/utils/mixin.js';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [mixin, MescrollMixin],
		components: {
			baseComponent,
			footBar,
			tuiSwipeAction,
			tuiButton,
			tuiNumberbox,
			tuiDivider,
			mixEmpty
		},
		data() {
			return {
				isLoading: false,
				activeList: [
					{
						"id":"389bb049b2878295910a0d95dd9dccd0",
						"orderCount":1,
						"customerUserId":"1380061940062154754",
						"suitId":"",
						"productId":"P2104130000000103",
						"productSpecificationId":"9fcadd84bf9415956b8f0e5ac8a46504",
						"version":1,
						"createUser":1380061940062154800,
						"createTime":"2021-07-26 16:41:18",
						"updateUser":1380061940062154800,
						"updateTime":"2021-07-26 16:41:18",
						"deleteFlg":0,
						"productSpecificationName":"默认",
						"virtualInventory":1982,
						"isInvalid":0,
						"productThumbnailImageUrl":"https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210421/62c35cfc-a7f0-4692-81d1-9d0eb9a94aee/blob",
						"productName":"Dr.R 晶采修护底霜",
						"productPrice":88,
						"isParcel":0,
						"productDiscountPrice":88,
						"collectionProductFlg":0,
						"checked":false
					},
					{
						"id":"a111e83e3251fc0d2b5fae92968e9b38",
						"orderCount":1,
						"customerUserId":"1380061940062154754",
						"suitId":"",
						"productId":"P2106110000000158",
						"productSpecificationId":"a3da14751d4fa08df901f098b2436f6b",
						"version":1,
						"createUser":1380061940062154800,
						"createTime":"2021-07-26 15:30:38",
						"updateUser":1380061940062154800,
						"updateTime":"2021-07-26 15:30:38",
						"deleteFlg":0,
						"productSpecificationName":"默认规格",
						"virtualInventory":5095,
						"isInvalid":0,
						"productThumbnailImageUrl":"https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210611/924a9168-96c4-4d69-ad6e-930fcc54880c/blob",
						"productName":"vita nuova仙草冻（果味型果冻）",
						"productPrice":69,
						"isParcel":0,
						"productDiscountPrice":69,
						"collectionProductFlg":0,
						"checked":false
					}
				],
				invalid: [],
				shopcartCount: 2,
				allChecked: false,
				// totalPrice: 0.0,
				imgSrc: this.$store.state.imgUrl,
			}
		},
		computed:{
			totalPrice() {
				const list = this.activeList || []
				let price = 0
				for (var i = 0; i < list.length; i++) {
					if (list[i].checked) {
						price += list[i].productDiscountPrice * list[i].orderCount
					}
				}
				return price
			}
		},
		
		methods: {
			getLocation() {
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
				        // const latitude = res.latitude;
				        // const longitude = res.longitude;
						const latitude = 39.909; // 默认定在首都;
						const longitude = 116.39742;
				        uni.openLocation({
				            latitude: latitude,
				            longitude: longitude,
				            success: function () {
				                console.log('success');
				            }
				        });
				    }
				});
			},
			toOrder() {
				
			},
			selectSingle(index) {
				this.activeList[index].checked = !this.activeList[index].checked
			},
			changeNum(e, index) {
				console.log(e, this.activeList[index], '、、、、、、、、、、');
				this.activeList[index].orderCount = e.value
			},
			deleteCart() {
				console.log(this.activeList)
				this.mescroll.endSuccess(21);
				// uni.navigateBack();
			},
			btnPay() {
				uni.navigateTo({
					url:'/packageG/pages/order/orderConfirm'
				})
			}
		}
	}
</script>

<style scoped>
	.container{
		padding-bottom: 100rpx;
	}
	.bind-card{
		margin: 0;
	}
	image{
		width: 100%;
	}
	.location{
		display: block;
		position: relative;
		padding: 0 2rem 0 1rem;
	}
	.location::before{
		content: ' ';
		display: block;
		width: .5rem;
		height: .5rem;
		border-radius: 100%;
		background: #E94732;
		position: absolute;
		top: 50%;
		margin-top: -.25rem;
		left: 0;
	}
	.location::after{
		content: '\e672';
		display: block;
		position: absolute;
		right: 0;
		font-size: 1.5rem;
		font-family: "iconfont" !important;
		top:50%;
		margin-top: -.75rem;
		color: #E94732;
	}
	.clamp {
		/* #ifdef APP-PLUS-NVUE */
		lines: 1;
		/* #endif */
		/* #ifndef APP-PLUS-NVUE */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		/* #endif */
	}
	
	.tabbar-category {
		    width: 100%;
		    height: 100rpx;
		    background: #fff;
		    position: fixed;
		    left: 0;
		    bottom: 0;
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    -webkit-box-align: center;
		    -webkit-align-items: center;
		    align-items: center;
		    -webkit-box-pack: justify;
		    -webkit-justify-content: space-between;
		    justify-content: space-between;
		    padding-left: 7rpx;
		    -webkit-box-sizing: border-box;
		    box-sizing: border-box;
		    font-size: 24rpx;
		    z-index: 99999;
	}
	.tui-cart-cell {
		width: 100%;
		background: red;
		overflow: hidden;
		padding-bottom: 10rpx;
	}
	.tui-mtop {
	    margin-top: 10px;
	}
	.actView {
	    width: 97% !important;
	    margin: 10px auto;
	    border-radius: 10px;
	}
	.tui-cart-cell {
	    width: 100%;
	    background: #ffffff;
	    overflow: hidden;
	    padding-bottom: 5px;
	}
	.tui-mtop {
	    margin-top: 10px;
	}
	.fixedHeight {
	    height: 80px !important;
	}
	.tui-swipeout-wrap {
	    position: relative;
	    overflow: hidden;
	}
	.tui-swipeout-item {
	    width: 100%;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    font-size: 14px;
	    cursor: pointer;
	}
	.tui-swipeout-content {
	    white-space: nowrap;
	    overflow: hidden;
	}
	.swipe-action .swipe-change2 {
	    padding-top: 0px;
	}
	.tui-goods-item-wrap {
	    padding: 0 15px;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	}
	.tui-goods-item-wrap .tui-checkbox {
	    width: 27px;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    float: left;
	    margin-right: 5px;
	}
	uni-checkbox .uni-checkbox-wrapper {
	    display: -webkit-inline-flex;
	    display: -webkit-inline-box;
	    display: inline-flex;
	    -webkit-align-items: center;
	    -webkit-box-align: center;
	    align-items: center;
	    vertical-align: middle;
	}
	.tui-checkbox .uni-checkbox-input {
	    width: 15px;
	    height: 15px;
	    border-radius: 4px !important;
	}
	uni-checkbox .uni-checkbox-input {
	    margin-right: 5px;
	    -webkit-appearance: none;
	    appearance: none;
	    outline: 0;
	    border: 1px solid #d1d1d1;
	    background-color: #fff;
	    border-radius: 3px;
	    width: 22px;
	    height: 22px;
	    position: relative;
	}
	.tui-goods-item-wrap .tui-goods-item {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	}
	.tui-goods-img {
	    width: 80px;
	    height: 80px;
	    border-radius: 6px;
	    -webkit-flex-shrink: 0;
	    flex-shrink: 0;
	    display: block;
	}
	uni-image>div, uni-image>img {
	    width: 100%;
	    height: 100%;
	}
	.tui-goods-info {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	    width: 100%;
	    padding-left: 10px;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: column;
	    flex-direction: column;
	    -webkit-box-align: start;
	    -webkit-align-items: flex-start;
	    align-items: flex-start;
	    -webkit-box-pack: justify;
	    -webkit-justify-content: space-between;
	    justify-content: space-between;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    overflow: hidden;
	}
	.tui-goods-title {
	    width: 100%;
	    line-height: 14px;
	    white-space: normal;
	    word-break: break-all;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    font-size: 13px;
	    color: #333;
	}
	.tui-goods-model {
	    max-width: 100%;
	    color: #333;
	    background: #f5f5f5;
	    border-radius: 20px;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    -webkit-box-pack: justify;
	    -webkit-justify-content: space-between;
	    justify-content: space-between;
	    padding: 0 8px;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	}
	.tui-model-text {
	    max-width: 100%;
	    -webkit-transform: scale(0.9);
	    transform: scale(0.9);
	    -webkit-transform-origin: 0 center;
	    transform-origin: 0 center;
	    font-size: 13px;
	    line-height: 16px;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.tui-price-box {
	    width: 100%;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: end;
	    -webkit-align-items: flex-end;
	    align-items: flex-end;
	    -webkit-box-pack: justify;
	    -webkit-justify-content: space-between;
	    justify-content: space-between;
	}
	.tui-goods-price {
	    font-size: 17px;
	    font-weight: 500;
	    color: #E94732;
	}
	.tui-scale {
	    -webkit-transform-origin: 100% 100%;
	    transform-origin: 100% 100%;
	}
	.tui-numberbox {
	    display: -webkit-inline-flex;
	    display: -webkit-inline-box;
	    display: inline-flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	}
	.tui-disabled {
	    color: #ccc !important;
	}
	.numbox-icon {
	    padding: 5px;
	    font-weight: bold;
	}
	.tui-num-input {
	    text-align: center;
	    margin: 0 6px;
	    font-weight: 400;
	}
	uni-input {
	    display: block;
	    font-size: 16px;
	    line-height: 1.4em;
	    height: 1.4em;
	    min-height: 1.4em;
	    overflow: hidden;
	}
	.uni-input-form, .uni-input-wrapper {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    position: relative;
	    width: 100%;
	    height: 100%;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: column;
	    flex-direction: column;
	    -webkit-box-pack: center;
	    -webkit-justify-content: center;
	    justify-content: center;
	}
	.uni-input-placeholder {
	    position: absolute;
	    top: auto!important;
	    left: 0;
	    color: grey;
	    overflow: hidden;
	    text-overflow: clip;
	    white-space: pre;
	    word-break: keep-all;
	    pointer-events: none;
	    line-height: inherit;
	}
	.uni-input-input, .uni-input-placeholder {
	    width: 100%;
	}
	.uni-input-input {
	    position: relative;
	    display: block;
	    height: 100%;
	    background: none;
	    color: inherit;
	    opacity: 1;
	    font: inherit;
	    line-height: inherit;
	    letter-spacing: inherit;
	    text-align: inherit;
	    text-indent: inherit;
	    text-transform: inherit;
	    text-shadow: inherit;
	}
	.uni-input-input, .uni-input-placeholder {
	    width: 100%;
	}
	.tabbar-category {
	    bottom: 0 !important;
	}
	.tui-tabbar {
	    width: 100%;
	    background: #fff;
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    -webkit-justify-content: space-around;
	    justify-content: space-around;
	    font-size: 13px;
		padding-left: 15px;
	    z-index: 999;
	}
	.tui-checkAll {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-pack: justify;
	    -webkit-justify-content: space-between;
	    justify-content: space-between;
	    width: 65%;
	    font-size: 14px;
	    margin-right: 3%;
	}
	.tui-checkAll {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	}
	.tui-bold {
	    font-weight: bold;
	}
	.price-color {
	    color: #E94732;
	}
	uni-text {
	    line-height: 1;
	}
	.shopcartBtn {
	    padding-bottom: 7px;
		margin-right: 1rem;
	}
	.category-btn {
	    height: 100%;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    padding-top: 7px;
	}
	
	
	
	
</style>
